<script setup>
import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
import {subTaskSub, exportTaskFile} from "@/api/task/taskSub";
import axios from "axios";

const {proxy} = getCurrentInstance();
const taskId = proxy.$route.params.id;
const data = reactive({
  form: {
    createdAt: '',
    deadline: ''
  },
  queryParams: {
    pageNum: 1,
    pageSize: 30,
    taskId: 4
  },
  rules: {
    taskName: [
      {required: true, message: "任务名称不能为空", trigger: "blur"}
    ],
    description: [
      {required: true, message: "描述不能为空", trigger: "blur"}
    ],
    createdBy: [
      {required: true, message: "id谁创建的不能为空", trigger: "blur"}
    ],
    createdAt: [
      {required: true, message: "创建时间不能为空", trigger: "blur"}
    ],
    deadline: [
      {required: true, message: "截止日期不能为空", trigger: "blur"}
    ],
    status: [
      {required: true, message: "状态不能为空", trigger: "change"}
    ]
  }
});
const total = ref()
const {queryParams, form, rules} = toRefs(data);
//展示已经提交学生的信息
const getList = () => {
  loading.value = true;
  subTaskSub(queryParams.value).then(response => {
    taskInfoList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
const taskInfoList = ref([])

const loading = ref(true);
getList()

const ids = ref([]);
const single = ref(true);
const multiple = ref(true);

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// const handleExport = async () => {
//   try {
//     // 发送请求获取文件
//     const res = await exportTaskFile(ids.value);
//     // 创建 Blob 对象，并设置文件类型为 ZIP
//     const blob = new Blob([res.data], {type: 'application/zip'}); // 指定格式
//     const link = document.createElement('a');
//     link.href = URL.createObjectURL(blob);
//     link.download = `abcd.zip`; // 指定导出名称
//     link.click();
//     URL.revokeObjectURL(link.href);
//
//   } catch (error) {
//     console.error('Error downloading file:', error);
//   }
// };

const apiURL = 'http://localhost:8080'; // 替换为你的 API URL

import {getToken} from '@/utils/auth'

const handleExport = async () => {
  console.log(ids.value)
  try {
    // headers['Authorization'] = 'Bearer ' + getToken()
    const response = await axios.post(`${apiURL}/tasksub/download-zip`, ids.value, {
      responseType: 'blob',
      headers: {
        'Content-Type': 'application/json; application/octet-stream',
        'Authorization': 'Bearer ' + getToken()// 添加 Bearer Token
      },
    });
    // 根据响应的 Content-Type 设置 Blob 的类型
    // const contentType = response.headers['content-type'];
    const blob = new Blob([response.data], {type: 'application/zip'});
    // 获取文件名
    const fileName = 'aa'; // 可以根据需要修改文件名
    const fileName2 = 'aa.zip'; // 可以根据需要修改文件名

    // 创建一个链接并下载文件
    const a = document.createElement('a');
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.style.display = 'none'; // 隐藏链接
    a.click(); // 触发下载
    document.body.removeChild(a); // 下载后移除链接
    window.URL.revokeObjectURL(url); // 释放 Blob URL
  } catch (error) {
    console.error('下载文件时出错:', error); // 错误处理
  }
};

</script>

<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="small"
            @click="handleExport"
        >批量导出
        </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="taskInfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="学号" align="center" prop="studentId"/>
      <el-table-column label="姓名" align="center" prop="studentName"/>
      <el-table-column label="提交时间" align="center" prop="submissionTime"/>
    </el-table>
  </div>
</template>

<style scoped lang="scss">

</style>
